<template>
  <view class="content" v-if="data">
    <view class="details">
      <view class="detailsHd">
        <view class="title">
          <i class="iconfont icon-prompt" :class="[getStatus[1]]"></i>
          <view>{{ getStatus[0] }}</view>
        </view>

        <view class="des">
          {{ getStatus[2] }}

          <view class="desTime" v-if="isCountdown">
            {{ $t("newAdmin.order.surplus") }}：<view
              v-if="styleType === 1"
              class="flex"
            >
              <view>{{ `${times[2]}分${times[3]}秒` }}</view>
            </view>
            <!-- <view v-else class="flex">
              <view>{{
                `${times[0]}天${times[1]}时${times[2]}分${times[3]}秒自动收货`
              }}</view>
            </view> -->
          </view>
        </view>
      </view>

      <view class="detailsModule" v-if="data.order.express_detail.list.length">
        <view class="detailsModuleTitle">
          <i class="iconfont icon-landtransportation"></i>
          <view class="item">{{ data.order.express_detail.status_text }}</view>
        </view>

        <view class="detailsModuleDes">
          {{
            data.order.express_detail.list[
              data.order.express_detail.list.length - 1
            ].detail
          }}
        </view>
      </view>

      <view
        class="detailsModule"
        v-if="!(opi.type === '1' && parseInt(data.order.status) === 0)"
      >
        <view class="detailsModuleTitle">
          <i class="iconfont icon-seat"></i>
          <view class="item">{{ data.order.name }}</view>
          <view class="item">{{ data.order.mobile }}</view>
          <view
            class="item copy"
            v-if="showOrderNumber"
            @click="copy(data.order.mobile)"
          >
            {{ $t("person.copy") }}
          </view>
        </view>

        <view class="detailsModuleDes">
          {{ $t("common.address") }}：{{ data.order.address }}
        </view>
      </view>

      <view class="selectForm" v-if="showHandle" @click="handle('address')">
        <view class="item">
          <view class="let">{{ $t("admin.refundAddress") }}</view>
          <view class="rig">
            <view class="rigText">
              <u-input
                disabled
                @click="handle('address')"
                :value="getAddress(data.order.address)"
                placeholder="请填写退货地址"
                type="text"
                :style="{
                  textAlign: 'right'
                }"
              />
            </view>
            <view class="iconfont icon-arrow-right"></view>
          </view>
        </view>
      </view>

      <view class="selectForm" v-if="showOrderNumber">
        <view class="item">
          <view class="let">{{
            $t("newAdmin.order.CourierServicesCompany")
          }}</view>
          <view class="rig">
            <view class="rigText">
              <u-input
                disabled
                :value="data.order.user_send_express"
                :placeholder="$t('newAdmin.order.auto')"
                type="text"
                :style="{
                  textAlign: 'right'
                }"
              />
            </view>
          </view>
        </view>
        <view class="item">
          <view class="let">{{ $t("newAdmin.order.courierNumber") }}</view>
          <view class="rig">
            <view class="rigText">
              <u-input
                disabled
                :value="data.order.user_send_express_no"
                :placeholder="$t('newAdmin.order.auto')"
                type="text"
                :style="{
                  textAlign: 'right'
                }"
              />
            </view>
          </view>
        </view>
      </view>

      <view class="detailsModule">
        <view class="detailsModuleTitle">
          <i class="iconfont icon-store" v-if="opi.type === '0'"></i>
          <view class="item" v-if="opi.type === '0'">
            <template v-if="data.order.md_id > 0">{{
              data.order.md_name
            }}</template
            ><template v-else>{{ data.order.store_name }}</template>
          </view>
          <view class="item" v-if="opi.type === '1'">{{
            $t("mdAdmin.salesOut")
          }}</view>
        </view>

        <view class="detailsModuleList">
          <pageList :items="data.order.detail" :order="data.order"></pageList>
        </view>
        <view
          v-if="opi.type === '0'"
          class="detailsTel"
          @click="makePhoneCall(data.order.mobile)"
        >
          <i class="iconfont icon-telephone-out1"></i>
          <view>{{ $t("newAdmin.order.ContactBuyer") }}</view>
        </view>
      </view>

      <view class="detailsInfo" v-if="opi.type === '0'">
        <view class="item" v-if="data.order.order_no">
          <view class="box">
            <view class="let">{{ $t("clerk.orderNum") }}：</view>
            <view class="rig">
              {{ data.order.order_no
              }}<text class="rigcopy" @click="copy(data.order.order_no)">{{
                $t("person.copy")
              }}</text>
            </view>
          </view>
          <view class="box">
            <view class="let">{{ $t("clerk.orderTime") }}：</view>
            <view class="rig">
              {{ data.order.created_at }}
            </view>
          </view>
        </view>

        <view class="item">
          <view class="box">
            <view class="let">{{ $t("order.methods") }}：</view>
            <view class="rig">{{ getPayType(data.order.pay_type) }}</view>
          </view>
        </view>

        <view class="item">
          <view class="box">
            <view class="let">{{ $t("order.expressMethos") }}：</view>
            <view class="rig">{{ getDelivery(data.order.delivery_type) }}</view>
          </view>
        </view>

        <view class="item item2">
          <view class="box">
            <view class="let">{{ $t("admin.goodsTotalPrice") }}</view>
            <view class="rig">¥{{ data.order.goods_price }}</view>
          </view>
          <view class="box">
            <view class="let">{{ $t("goods.freight") }}</view>
            <view class="rig">+ ¥{{ data.order.express_price }}</view>
          </view>
          <view class="box">
            <view class="total">
              <view class="rigText">{{ $t("order.needPay") }}：</view>
              <view class="rigPrice"
                >¥<text class="price">{{
                  getPrect(data.order.pay_price)[0]
                }}</text
                ><text class="icon"
                  >.{{ getPrect(data.order.pay_price)[1] }}</text
                ></view
              >
            </view>
          </view>
        </view>
      </view>
      <view class="detailsInfo" v-else>
        <view class="item">
          <view class="box">
            <view class="let">{{ $t("order.refundType") }}：</view>
            <view class="rig">
              {{ getType }}
            </view>
          </view>
          <view class="box">
            <view class="let">{{ $t("newAdmin.order.refundTime") }}：</view>
            <view class="rig">
              {{ data.order.created_at }}
            </view>
          </view>
        </view>

        <view class="item" v-if="data.order.desc">
          <view class="box">
            <view class="let">{{ $t("admin.applyReason") }}：</view>
            <view class="rig">
              {{ data.order.desc }}
            </view>
          </view>
        </view>

        <view class="item" v-if="data.order.refuse_desc">
          <view class="box">
            <view class="let">{{ $t("shop.refuseReason") }}：</view>
            <view class="rig">
              {{ data.order.refuse_desc }}
            </view>
          </view>
        </view>

        <view class="item item2">
          <view class="box">
            <view class="total">
              <view class="rigText">{{ $t("order.money") }}：</view>
              <view class="rigPrice"
                >¥<text class="price">{{
                  getPrect(data.order.refund_price)[0]
                }}</text
                ><text class="icon"
                  >.{{ getPrect(data.order.refund_price)[1] }}</text
                ></view
              >
            </view>
          </view>
        </view>
      </view>
    </view>

    <view
      class="tools-pof"
      v-if="
        data.order.md_id == 0 ||
        (data.order.md_id > 0 && data.order.is_trans == 1)
      "
    >
      <view class="btn on" @click="handle('cancel')" v-if="showCancel">{{
        $t("order.cancleOrder")
      }}</view>
      <view class="btn" @click="handle('delivery')" v-if="showDelivery">{{
        $t("newAdmin.order.sendGoods")
      }}</view>

      <view v-if="showHandle" class="btn on" @click="handle('action', 2)">{{
        $t("newAdmin.order.refuse")
      }}</view>
      <view v-if="showHandle" class="btn" @click="handle('action', 1)">{{
        $t("newAdmin.order.agree")
      }}</view>

      <view v-if="showConcat" class="btn" @click="handle('contact')">{{
        $t("newAdmin.order.ContactSeller")
      }}</view>

      <view v-if="showReceiving" class="btn" @click="handle('action', 3)">{{
        $t("shop.confirm")
      }}</view>
    </view>
  </view>
</template>

<script>
import pageList from "./components/page-list.vue";

import {
  storeAdminOrderDetail,
  storeAdminOrderCancel,
  storeAdminOrderRefundApply
} from "@/api/admin";

let timer = null;
export default {
  components: {
    pageList
  },

  data() {
    return {
      opi: null,
      data: null,
      isCountdown: false,
      styleType: 1,

      times: [0, "00", "00", "00"],

      action: undefined
    };
  },

  filters: {
    timestampToTime(timestamp) {
      let date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let y = date.getFullYear();
      let M = month ? "0" + month : month;
      let d = day < 10 ? "0" + day : day;
      let h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let m =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return `${y}-${M}-${d} ${h}:${m}:${s}`;
    }
  },

  computed: {
    getType() {
      let { type } = this.data.order,
        str;

      switch (type) {
        case "1":
          str = "退货退款";
          break;

        case "2":
          str = "换货";
          break;
      }

      return str;
    },

    getAddress() {
      return (address) => {
        return address === "0" ? "" : address;
      };
    },

    showCancel() {
      let { status } = this.data.order;
      if (this.opi.type === "0" && (status === -1 || status === 0)) {
        return true;
      } else {
        return false;
      }
    },

    // 是否显示同意拒绝按钮
    showHandle() {
      let { data, opi } = this,
        { status } = data.order;

      if (opi.type === "1" && status === 0) {
        return true;
      }

      return false;
    },

    showConcat() {
      let { data, opi } = this,
        { status } = data.order;

      if (opi.type === "1" && status === 3) {
        return true;
      }

      return false;
    },

    showReceiving() {
      let { data, opi } = this,
        { status } = data.order;

      if (opi.type === "1" && status === 5) {
        return true;
      }

      return false;
    },

    showDelivery() {
      if (!this.data) return false;

      let { status, pay_type } = this.data.order;

      if (status == 0 || (status == -1 && pay_type == 2)) {
        return true;
      } else {
        return false;
      }
    },

    getPrect() {
      return (price) => {
        let newPrice = String(price).split(".");

        return newPrice;
      };
    },

    getDelivery() {
      return (type) => {
        let str = "";

        switch (type) {
          case "0":
            str = "普通快递";
            break;
          case "1":
            str = "到店自提";
            break;
          case "2":
            str = "同城配送";
            break;
        }

        return str;
      };
    },

    getPayType() {
      return (type) => {
        let str = "";

        switch (type) {
          case "1":
            str = "微信支付";
            break;
          case "2":
            str = "货到付款";
            break;
          case "3":
            str = "余额支付";
            break;
          case "4":
            str = "支付宝";
            break;
          case "5":
            str = "抖音支付";
            break;
          case "6":
            str = "线下支付";
            break;
        }

        return str;
      };
    },

    getStatus() {
      let { opi, data } = this;
      if (!opi || !data) {
        return ["", "", ""];
      }

      let str,
        des = "",
        { status } = data.order,
        icon = "icon-clock";

      if (opi.type === "0") {
        // 普通订单
        switch (status) {
          case -1:
            str = "等待付款";
            des = "等待卖家付款";
            break;

          case 0:
            str = "等待发货";
            des = "卖家已付款 等待发货";
            break;

          case 1:
            str = "已取消";
            icon = "icon-prompt";
            des = "用户已取消订单";
            break;

          case 2:
            str = "等待收货";
            break;

          case 3:
            str = "确认收货";
            icon = "icon-success";
            des = "用户已确认收货";
            break;
        }
      } else {
        // 售后订单
        switch (status) {
          case 0:
            str = "等待处理";
            des = "等待商家确认退货";
            break;

          case 1:
            str = "已退款";
            des = "同意并已退款";
            icon = "icon-success";
            break;

          case 2:
            str = "已同意换货";
            des = "同意换货完成处理";
            icon = "icon-success";
            break;

          case 3:
            str = "拒绝申请";
            des = "已拒绝申请，原因：不予退货";
            icon = "icon-prompt";
            break;

          case 4:
            str = "已同意";
            des = "申请已同意，等待买家退货";
            break;

          case 5:
            str = "同意退款";
            des = "等待商户确认收货";
            break;
        }
      }

      return [str, icon, des];
    },

    showOrderNumber() {
      let { data, opi } = this,
        { status } = data.order;

      if (opi.type === "1" && (status === 2 || status === 4 || status === 5)) {
        return true;
      }

      return false;
    }
  },

  onLoad(opi) {
    this.$utils.hideShareMenu();

    this.opi = opi;
  },

  onShow() {
    this.storeAdminOrderDetail();
  },

  destroyed() {
    clearInterval(timer);
  },

  methods: {
    // 同意/拒绝/收货接口
    storeAdminOrderRefundApply(action) {
      let { opi, disabled, data } = this,
        { type, address_id } = data.order,
        params = {
          id: opi.id,
          action
        };

      if (!action || disabled) {
        return;
      }

      if (action === 1) {
        if (address_id === "0" || !address_id) {
          this.$utils.toast("请选择退货地址！");
          return;
        }

        params.address_id = address_id;
      }

      if (action === 3) {
        params.action = 1;
        params.refund = 1;
      }

      params.type = type;
      this.disabled = true;
      storeAdminOrderRefundApply(params)
        .then((res) => {
          this.$utils.toast(res.msg);
          this.disabled = false;
          if (res.code === 0) {
            this.storeAdminOrderDetail();
          }
        })
        .catch(() => {
          this.disabled = false;
        });
    },

    countDownDataItem(endTime) {
      let currentTime = new Date().getTime();
      let timeStr = endTime;

      // // 如果活动未结束，对时间进行处理
      if (timeStr - currentTime > 0) {
        let time = (timeStr - currentTime) / 1000;

        // 获取天、时、分、秒
        let day = parseInt(time / (60 * 60 * 24)),
          hou = this.$utils.formatNumber(
            parseInt((time % (60 * 60 * 24)) / 3600)
          ),
          min = this.$utils.formatNumber(
            parseInt(((time % (60 * 60 * 24)) % 3600) / 60)
          ),
          sec = this.$utils.formatNumber(
            parseInt(((time % (60 * 60 * 24)) % 3600) % 60)
          );

        this.times = [day, hou, min, sec];
      } else {
        clearInterval(timer);
        this.storeAdminOrderDetail();
      }
    },

    makePhoneCall(phoneNumber) {
      this.$utils.makePhoneCall(phoneNumber);
    },

    copy(data) {
      uni.setClipboardData({
        data,
        success: () => {
          this.$utils.toast("复制成功~");
        }
      });
    },

    handle(type, item) {
      let { id } = this.opi;
      switch (type) {
        case "cancel":
          this.$utils.showModal("提示", "是否取消订单？", true, () => {
            storeAdminOrderCancel({
              id
            }).then((res) => {
              if (res.code === 0) {
                this.storeAdminOrderDetail();
              }
              this.$utils.toast(res.msg);
            });
          });
          break;

        case "delivery":
          uni.navigateTo({
            url: `/admin/order/delivery/index?id=${id}`
          });
          break;

        case "action":
          this.storeAdminOrderRefundApply(item);
          break;

        case "address":
          uni.navigateTo({
            url: `/admin/address/addressmanage?id=${id}&is_order=1`
          });
          break;

        case "contact":
          this.$utils.makePhoneCall(this.data.order.mobile);

          break;
      }
    },

    getCountDown() {
      let { data, opi } = this,
        isCountdown = false;

      if (data && opi.type === "0") {
        if (data.order.status === -1 || data.order.status === 2) {
          isCountdown = true;
          if (data.order.status === 2) {
            this.styleType = 2;
          }

          this.countDownDataItem(data.order.pay_time * 1000);
          timer = setInterval(() => {
            this.countDownDataItem(data.order.pay_time * 1000);
          }, 1000);
        } else {
          isCountdown = false;
        }
      }

      this.isCountdown = isCountdown;
    },

    storeAdminOrderDetail() {
      storeAdminOrderDetail(this.opi).then((res) => {
        if (res.code === 0) {
          this.data = res.data;

          if (res.data.order.pay_type == 2) return;
          this.getCountDown();
          return;
        }

        this.$utils.toast(res.msg);
      });
    }
  }
};
</script>

<style lang="less" scoped>
.content {
  position: relative;
  background: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 150rpx;
}

.tools-pof {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 100%;
  padding: 10rpx 30rpx calc(env(safe-area-inset-bottom) + 10rpx);
  background: #fff;
  text-align: right;
}

.tools-pof .btn {
  display: inline-block;
  margin-left: 24rpx;
  border-radius: 32px;
  width: 180rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  background: #f0250e;
  color: #fff;
  border: 1px solid #f0250e;
  font-size: 26rpx;

  &.on {
    border-color: #262626;
    background: #fff;
    color: #262626;
  }
}

.detailsHd {
  padding: 30rpx 0;
  text-align: center;

  .title {
    display: flex;
    justify-content: center;
    color: #f0250e;
    font-size: 40rpx;
    font-weight: bold;

    .iconfont {
      margin-right: 8rpx;
      font-size: 60rpx;
      font-weight: normal;
    }
  }

  .des {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 16rpx;
    color: #8c8c8c;
    font-size: 24rpx;
  }

  .desTime {
    margin-left: 20rpx;
    display: flex;
    align-items: center;
  }
}

.detailsModule {
  margin-bottom: 24rpx;
  padding: 26rpx;
  background: #fff;
}

.detailsModuleTitle {
  display: flex;
  color: #262626;
  font-weight: bold;
  font-size: 35rpx;

  .iconfont {
    margin-right: 12rpx;
    font-size: 45rpx;
  }

  .item {
    margin-right: 22rpx;

    &.copy {
      padding: 6rpx 20rpx;
      background: #f2f2f2;
      border-radius: 32px;
      font-size: 22rpx;
      color: #262626;
      font-weight: normal;
    }
  }
}

.detailsModuleDes {
  padding-top: 10rpx;
  font-size: 24rpx;
  color: #8c8c8c;
  line-height: 1.5;
}

.detailsInfo {
  padding: 0 24rpx;
  background: #fff;

  .item {
    padding: 15rpx 0;
    border-bottom: 1px solid #f8f8f8;

    &:last-of-type {
      border-bottom: 0;
    }

    &.item2 .rig {
      text-align: right;
    }
  }

  .box {
    display: flex;
    align-items: center;
    padding: 15rpx 0;
    font-size: 26rpx;

    .rig {
      flex: 1;
      overflow: hidden;
      color: #262626;
    }

    .let {
      padding-right: 10rpx;
      color: #8c8c8c;
    }

    .total {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex: 1;
    }

    .rigText {
      color: #8c8c8c;
    }

    .rigPrice {
      color: #f0250e;
      font-size: 26rpx;

      .price {
        font-size: 36rpx;
      }

      .icon {
        font-size: 24rpx;
      }
    }
  }
}

.rigcopy {
  display: inline-block;
  margin-left: 38rpx;
  padding: 6rpx 20rpx;
  background: #f2f2f2;
  border-radius: 32px;
  font-size: 22rpx;
  color: #262626;
}

.detailsTel {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  border-top: 1px solid #f8f8f8;
  padding: 20rpx 0 0;

  .iconfont {
    margin-right: 10rpx;
    font-size: 45rpx;
  }
}

.selectForm {
  background: #fff;
  margin-bottom: 24rpx;
  padding: 5rpx 26rpx;

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5rpx 0;
  }

  .rig {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .rigText {
    flex: 1;
  }

  .icon-arrow-right {
    color: #cdcdcd;
  }
}
</style>
